<template>
  <div>
    <nav-bar title="搜索结果" />
    <!-- 文章列表 -->
    <article-list
      class="main"
      :data="searchResult"
    />
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex';

export default {
  name: 'SearchResult',
  computed: {
    ...mapState('search', [
      'searchResult',
    ]),
  },
  methods: {
    ...mapActions('search', [
      'updateSearchResult',
    ]),
    ...mapMutations('search', [
      'SET_SEARCH_RESULT',
    ]),
  },
  created() {
    // // 路由实例
    // console.log(this.$router);
    // // 当前路由信息
    // console.log(this.$route.query.q);

    this.updateSearchResult(this.$route.query.q);
  },
  beforeDestroy() {
    this.SET_SEARCH_RESULT([]);
  },
}
</script>

<style lang="less" scoped>
.main{
  padding: 16px;
}
</style>>
